<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<link href="css/style.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/select2.min.js"></script>
<script type="text/javascript">
     function format(state) {
    if (!state.id) return state.text; // optgroup
    return "<img class='flag' src='images/flags/" + state.id.toLowerCase() + ".png'/>" + state.text;
    }
    $("#e4").select2({
    formatResult: format,
    formatSelection: format
    });
</script>
</head>
<body>

	<div class="header">
		<div class="wrapper">
			<div class="logo">
				<img src="images/banner.jpg" alt="" />
			</div>

			<div class="login user">
				<form action="">
					<div class="form-input" style="margin-right: 0">
						<p>Hi, Onur Serkan</p>
						<input type="submit" value="Logout" />
					</div>
				</form>
			</div>

			<div class="login none">
				<form action="">
					<div class="form-input">
						<label>Username</label> <input type="text" />
					</div>
					<div class="form-input">
						<label>Password</label> <input type="password" />
					</div>
					<div class="form-input" style="margin-right: 0">
						<input type="submit" value="Login" />
					</div>
				</form>
			</div>
		</div>
	</div>

	<div class="content">
		<div class="wrapper">

			<div class="leftmenu">
				<ul>
					<li><a href="#">Home Page</a></li>
					<li><a href="#">Add Report</a></li>
					<li><a href="#">Search For a Violation</a></li>
					<li><a href="#">View My Reports</a></li>
					<li><a href="#">Logout</a></li>
				</ul>
			</div>

			<div class="centercol">

				<h3>Hi, Onur Serkan</h3>
				<p>Here is your reports!!</p>

				<div class="report-list">
					<div class="report-list-item">
						<table>
							<tr>
								<td class="col1" width="100">Report Name</td>
								<td width="10">:</td>
								<td class="col2" width="400">2 <a href="#">Detail</a></td>
							</tr>
							<tr>
								<td class="col1">Status</td>
								<td width="10">:</td>
								<td class="col2">2</td>
							</tr>
							<tr>
								<td class="col1">Description</td>
								<td width="10">:</td>
								<td class="col2"><p>
										XXX
									</p></td>
							</tr>
						</table>
					</div>
				</div>

			</div>

			<div class="rightcol subscribed">

				<h3>Subscribed Reports</h3>
				<p>Here is the list of reports that you subscribed in. You will be notified in case of report status change via e-mail.</p>
				<div class="report-list">
					<div class="report-list-item">
						<table>
							<tr>
								<td class="col1" width="100">Report Name</td>
								<td width="10">:</td>
								<td class="col2" width="170">2 <a href="#">Detail</a></td>
							</tr>
							<tr>
								<td class="col1">Status</td>
								<td width="10">:</td>
								<td class="col2">2</td>
							</tr>
							<tr>
								<td class="col1">Description</td>
								<td width="10">:</td>
								<td class="col2 desc"><p>YYY</p></td>
							</tr>
						</table>
					</div>
				</div>

			</div>

		</div>
	</div>

	<div class="footer">
		<div class="wrapper">
			<p>
				Boğaziçi Üniversitesi Accessibility Violations Project<br />&copy;2012
			</p>
		</div>
	</div>

</body>
</html>
